<template>
  <el-dialog title="添加员工" :visible="showDialog" width="50%" @close="onClose" @closed="onClosed">
    <!-- 添加的表单 -->
    <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="form.formOfEmployment" style="width: 100%" placeholder="">
          <!--循环生成聘用形式的可选项-->
          <el-option v-for="item in hireType" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="form.workNumber" />
      </el-form-item>
      <el-form-item label="部门名称" prop="departmentName">
        <!-- :options="数据源" -->
        <!-- :props="配置选项" -->
        <el-cascader v-model="form.departmentName" :options="treeData" :props="casProps" style="width: 100%"></el-cascader>
      </el-form-item>
      <el-form-item label="入职/转正" prop="timeOfEntry">
        <el-date-picker v-model="form.timeOfEntry" type="daterange" range-separator="至" start-placeholder="入职日期" end-placeholder="转正日期" style="width: 100%">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入员工相关的常量对象
import empConst from '@/api/constant/employees.js'
// 按需导入接口
import { getDepartListAPI } from '@/api/depart.js'
import { addEmpAPI } from '@/api/emp.js'
import { arr2Tree } from '@/utils'

export default {
  name: 'AddEmp',
  props: {
    // 控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 聘用形式的可选项
      hireType: empConst.hireType,
      // 表单的数据对象
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: [],
        timeOfEntry: [],
        correctionTime: ''
      },
      // 验证规则对象
      formRules: {
        username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请填写正确的手机号', trigger: 'blur' }
        ],
        formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'change' }],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' },
          { pattern: /^\d{4,8}$/, message: '工号必须是4-8位的数字', trigger: 'blur' }
        ],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        timeOfEntry: [{ required: true, message: '入职/转正时间不能为空', trigger: 'change' }]
      },
      // 级联选择器的数据源
      treeData: [
        {
          name: '北京',
          value: '1',
          children: [
            { name: '顺义区', value: 'a' },
            { name: '西城区', value: 'b' },
            { name: '海淀区', value: 'c' }
          ]
        },
        { name: '上海', value: '2' },
        { name: '广州', value: '3' }
      ],
      // 级联选择器的配置项
      casProps: {
        label: 'name',
        value: 'name',
        // 打开子菜单的方式
        expandTrigger: 'hover',
        // 允许用户选中任何一级的节点
        checkStrictly: true
      }
    }
  },
  created() {
    this.initDepartList()
  },
  methods: {
    onClose() {
      this.$emit('update:showDialog', false)
    },
    // 对话框关闭完成，清理数据
    onClosed() {
      this.$refs.formRef.resetFields()
    },
    // 点击了确认按钮，添加员工
    onConfirm() {
      // 1. 对表单数据进行验证
      // 2. 整理数据
      // 3. 封装并调用接口
      // 4. 成功后的3件事儿
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return

        // 1. 把入职/转正时间浅拷贝一份
        const timeArr = [...this.form.timeOfEntry]
        // 2. 浅拷贝出来的 form 对象，是要发给服务器的数据
        const form = {
          // 表单中采集到的源数据
          ...this.form,
          // 部门名称
          departmentName: [...this.form.departmentName].pop(),
          // departmentName: this.form.departmentName[this.form.departmentName.length - 1],
          // 转正时间
          correctionTime: timeArr.pop(),
          // 入职时间
          timeOfEntry: timeArr.pop()
        }
        // 3. 调用接口
        await addEmpAPI(form)
        // 4. 成功后的3件事儿
        this.$message.success('新增员工成功！')
        this.$emit('reload')
        this.$emit('update:showDialog', false)
      })
    },
    // 初始化部门的列表数据
    async initDepartList() {
      const result = await getDepartListAPI()
      this.treeData = arr2Tree(result.data.depts, '')
    }
  }
}
</script>

<style></style>
